<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
   节点的创建和删除操作
    1. 创建节点
    2. 添加节点
    3. 删除节点
-->
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

<script>
    //  1.创建li节点对象  <li></li>
    let liElement = document.createElement('li');
    // 2. 添加内容  <li>4</li>
    liElement.innerText = '4'
    // 3. 添加节点到父节点
    let uElement = document.querySelector('ul');
    uElement.appendChild(liElement)
    // 获取需要移除的节点对象
    let li = document.querySelectorAll('li')[0]
    uElement.removeChild(li)

    // 插入节点
    let li2  = document.querySelectorAll('li')[1]
    uElement.insertBefore(liElement,li2)
</script>
</body>
</html>
